:root {
  --xz-main: rgba(0, 162, 227, 1);
  --xz-white: #ffffff;
  --xz-black: #000000;
  --xz-fontcolor: #00001e;
  --xz-focus-color: rgba(0, 162, 227, 1);
  --xz-main-radius: 8px;
}

[data-theme="light"] {
  --xz-main: #0a0909;
  --xz-main-op: #0a090923;
  --xz-theme: #425aef;
  --xz-nav-bg: #ffffff;
  --xz-card-bg: #fff;
  --xz-secondbg: #f7f7f9;
  --xz-shadow-border: 0 8px 16px -4px #2c2d300c;
  --xz-hover-color: rgba(0, 162, 227, 1);
  --xz-lighttext: #425aef;
  --style-border: 1px solid #e3e8f7;
  --style-border-hover: 1px solid #425aef;
  --style-border-dashed: 1px dashed #4259ef23;
  --xz-background: rgb(247, 249, 254);
}

[data-theme="dark"] {
  --style-border: 1px solid #3d3d3f;
  --xz-main: #ffffff;
  --xz-theme: #ffc848;
  --xz-lighttext: #ffc848;
  --xz-nav-bg: #000000;
  /* --xz-card-bg: #1b1c20; */
  --xz-shadow-border: 0 8px 16px -4px #00000050;
  /* --xz-card-bg: #272930; */
  --xz-card-bg: #202127;
  --xz-secondbg: #21232a;
  --xz-fontcolor: #f7f7fa;
  --xz-hover-color: rgb(227, 149, 22);
  --style-border-hover: 1px solid #ffc848;
  --style-border-hover-always: 1px solid #ffc848;
  --style-border-dashed: 1px dashed #f2b94b23;
  --xz-background: rgb(24, 23, 29);
}
